<template>
  <div class="resume-container">
    <draggable 
      v-model="resumeSections" 
      tag="div"
      item-key="id"
      group="resume"
      :sort="true"
      @start="onDragStart" 
      @end="onDragEnd"
    >
      <template #item="{ element }">
        <component :is="element.component" />
      </template>
    </draggable>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import draggable from 'vuedraggable'
import BasicInfo from '../components/resume/BasicInfo.vue'
import JobIntention from '../components/resume/JobIntention.vue'

// 简历模块
const resumeSections = ref([
  // 基础信息
  { id: 'basicInfo', component: BasicInfo },
  // 求职意向
  { id: 'jobIntention', component: JobIntention }
])

// 拖拽事件处理
const onDragStart = (event: any) => {
  console.log('Resume section drag start', event)
}
// 拖拽结束事件处理
const onDragEnd = (event: any) => {
  console.log('Resume section drag end', event)
}
</script>

<style scoped>
.resume-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
</style>